<template>
  <div style="width: 100%; padding: 0 20px">
    <div class="title">基本信息</div>
    <zh-form
        :span="6"
        ref="devPlanManagerForm1"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        :model="formData1"
    >
      <zh-row>
        <zh-input
            prop="orgId"
            type="select"
            :options="orgList"
            :defaultFields="{ label: 'dictValue', value: 'dictKey' }"
            label="区划"
            v-model="formData1.orgId"
            :disabled="disabled"
        ></zh-input>
        <zh-input
            prop="j0102"
            type="text"
            label="项目名称"
            v-model="formData1.j0102"
            :disabled="disabled"
        ></zh-input>
        <zh-input
            prop="j0103"
            type="text"
            label="责任单位"
            v-model="formData1.j0103"
            :disabled="disabled"
        ></zh-input>
        <zh-input
            prop="j0104"
            type="text"
            label="责任人"
            v-model="formData1.j0104"
            :disabled="disabled"
        ></zh-input>
        <zh-input
            prop="j0105"
            type="text"
            label="项目投资"
            v-model="formData1.j0105"
            :disabled="disabled"
        ></zh-input>
        <zh-input
            prop="j0106"
            type="date"
            format="YYYY-MM-DD"
            v-model="formData1.j0106"
            label="完工时间"
            :disabled="disabled"
        />
        <zh-input
            prop="j0107"
            type="text"
            label="项目地址"
            v-model="formData1.j0107"
            :disabled="disabled"
        ></zh-input>
        <zh-input
            prop="j0109"
            type="text"
            label="占地面积"
            v-model="formData1.j0109"
            :disabled="disabled"
        ></zh-input>
        <zh-input label="点位名称" show-search :labelInValue="true" :filter-option="false"
                  :not-found-content="fetching ? undefined : null"
                  :defaultFields="{label: 'b0102',value: 'b0101'}" type="select" placeholder="请输入点位名称"
                  v-model="b01"
                  :options="b01DataList"
                  @search="handleSearch"
                  @change="handleChange">
          <a-spin v-if="fetching" slot="notFoundContent" size="small"/>
        </zh-input>
      </zh-row>
    </zh-form>
    <div class="title divDisPlay">审核环节</div>
    <div style="height: 10px"></div>
    <div class="title">报审设置</div>
    <ep-button
        style="margin-left: 15px"
        size="default"
        icon="add.svg"
        @click="
            () => {
              this.addNode();
            }
          "
        :disabled="disabled"
    >新增节点
    </ep-button>
    <div style="height: 10px"></div>
    <zh-form
        :span="6"
        ref="devPlanManagerForm2"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        :model="formData2"
    >
      <zh-input v-for="(item,index) in form2List" :key="index"
                type="text"
                :label="item.label"
                v-model="formData2[item.field]"
                :disabled="disabled"
      ></zh-input>
    </zh-form>
    <zh-form
        :span="6"
        ref="devPlanManagerForm3"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        :model="formData3"
    >
      <zh-input
          type="select"
          :options="form2List"
          :defaultFields="{ label: 'label', value: 'field' }"
          label="当前节点"
          @change="changeNode"
          v-model="formData3.field"
          :disabled="disabled"
      ></zh-input>
      <div style="height: 35px;line-height: 35px;margin-left: 10px;">{{currentNodeValue}}</div>
    </zh-form>
    <div class="title divDisPlay">项目进展</div>
    <ep-button
        style="margin-top: 10px"
        size="default"
        icon="add.svg"
        @click="
            () => {
              this.addModel();
            }
          "
        :disabled="disabled"
    >新增模块
    </ep-button>
    <div v-for="(e, j03VOIndex) in j03VOList" :key="j03VOIndex" v-if="render">
      <div class="operate">
        <div style="width: 10%;">标题</div>
        <div style="width: 90%">
          <a-input placeholder="请输入标题" v-model="e.j0302" :disabled="disabled"/>
        </div>
      </div>
      <div class="operate">
        <div style="width: 10%;">简介</div>
        <div style="width: 90%">
          <a-textarea placeholder="请输入简介" :auto-size="{ minRows: 3, maxRows: 6 }" v-model="e.j0303" :disabled="disabled"/>
        </div>
      </div>
      <div class="operate">
        <div style="width: 10%;">多媒体</div>
        <div style="width: 90%;display: block">
          <div style="text-align: right;width: 100%">
            <ep-button
                icon="add.svg"
                size="small"
                type="primary"
                @click="addMediaInfo(j03VOIndex)"
                :disabled="disabled"
            >添加
            </ep-button>
          </div>
          <div>
            <ul class="media-wrap">
              <li v-for="(item, index) in e.mediaInfoList" :key="index">
                <div class="item special">
                  <div class="desc">序号</div>
                  <p>{{ item.b0207 }}</p>
                </div>
                <div class="item">
                  <div class="desc">名称</div>
                  <p>{{ item.b0203 }}</p>
                </div>
                <div class="item">
                  <div class="desc">媒体类型</div>
                  <p>{{ item.b0202Name }}</p>
                </div>
                <div class="item">
                  <div class="desc">缩略图</div>
                  <template v-if="item.b0202Name === '图片'">
                    <img
                        v-if="item.b0205"
                        :src="fileShowUrl + item.b0205"
                        @click="checkImg(item.b0205)"
                        alt=""
                    />
                  </template>
                  <template v-else>
                    <img
                        v-if="item.b0206"
                        :src="fileShowUrl + item.b0206"
                        @click="checkImg(item.b0206)"
                        alt=""
                    />
                  </template>
                </div>

                <div class="item">
                  <div class="desc"></div>
                  <div class="btn-wrap">
                    <ep-button
                        size="small"
                        icon="edit.svg"
                        @click="editMediaInfo(item, index,j03VOIndex)"
                        :disabled="disabled"
                    >编辑
                    </ep-button>
                    <ep-button
                        size="small"
                        type="danger"
                        icon="del.svg"
                        style="margin-left: 10px"
                        @click="deleteMediaInfo(index,j03VOIndex)"
                        :disabled="disabled"
                    >删除
                    </ep-button>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <a-modal
        :title="modalTitle"
        centered
        style="top: 20px"
        width="50%"
        destroyOnClose
        v-model="visible"
        cancelText="关闭"
        okText="保存"
        @ok="handleForm"
    >
      <mediaInfoItem ref="mediaInfoItem"/>
    </a-modal>
  </div>
</template>

<script>
import mediaInfoItem from "@/pages/system/form/mediaInfoItem";
import {fileShowUrl, getBatchDict} from "@/services/system/api";
import {getOrgList, getDevPlanDetail, getB01DataList} from "@/services/system/whdngxlApi"
import modal from "ant-design-vue/lib/modal";

let timeout;
let currentValue;
export default {
  name: "devPlanManagerForm",
  components: {
    mediaInfoItem,
  },
  data() {
    return {
      labelCol: {
        xs: {span: 24},
        sm: {span: 8},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      formData1: {
        j0101: '',
        orgId: '',
        j0102: '',
        j0103: '',
        j0104: '',
        j0105: '',
        j0106: '',
        j0107: '',
        j0109: '',
      },
      fetching: false,
      b01DataList: [],
      b01: undefined,
      orgId: '',
      orgList: [],
      mediaInfoList: [],
      modalTitle: '',
      visible: false,
      fileShowUrl,
      mediaFieldRuleTo: {
        j0301: 'j0301',
        b0201: 'j0401',
        b0203: 'j0402',
        b0202: 'j0403',
        b0206: 'j0404',
        b0205: 'j0405',
        b0207: 'j0406',
        flag: 'flag'
      },
      mediaFieldRuleFrom: {
        j0401: 'b0201',
        j0301: 'j0301',
        j0402: 'b0203',
        j0403: 'b0202',
        j0404: 'b0206',
        j0405: 'b0205',
        j0406: 'b0207'
      },
      j03VOList: [{
        j0302: '',
        j0303: '',
        mediaInfoList: [],
      }],
      j03VOItem: {
        j0302: '',
        j0303: '',
        mediaInfoList: [],
      },
      j03VOIndex: -1,
      mediaInfoListForEdit: [],
      mediaInfoListForDel: [],
      render: true,
      formData2: {},
      formData3: {
        field: ''
      },
      form2List: [
        {j0201: undefined, label: '节点1', field: 'p0', index: 0},
        {j0201: undefined, label: '节点2', field: 'p1', index: 1},
        {j0201: undefined, label: '节点3', field: 'p2', index: 2},
      ],
      currentNodeValue: undefined,
      disabled: false
    }
  },
  created() {
    this.$http.post(getOrgList, {}).then((res) => {
      this.orgList = res.result
    })
  },
  methods: {
    fetch(value, callback) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      currentValue = value;

      function fake(that) {
        that.fetching = true
        if (value) {
          that.$http.post(getB01DataList, {b0102: value, b0122: that.formData1.orgId}).then(res => {
            console.log(res)
            callback(res.result);
          }).catch((error) => {
            console.log(JSON.stringify(error))
          }).finally(() => {
            that.fetching = false
          })
        }
      }

      timeout = setTimeout(fake(this), 300);
    },
    handleSearch(value) {
      this.fetch(value, data => (this.b01DataList = data));
    },
    handleChange(option) {
      console.log(option);
      this.b01 = option
    },
    init(row,disabled) {
      debugger
      if(disabled){
        this.disabled = true
      }
      this.$http.post(getDevPlanDetail, {j0101: row.j0101}).then((res) => {
        this.render = false
        this.formData1 = res.result
        this.b01DataList = [{b0101: res.result.b0101, b0102: res.result.b0102}]
        this.b01 = {key: res.result.b0101, label: res.result.b0102}
        this.form2List = this.formData1.j02VOList
        this.form2List.forEach(item => {
          this.formData2[item.j0204] = item.j0203
          if (this.formData1.j0201 && this.formData1.j0201 === item.j0201) {
            this.formData3.field = item.field
          }
        })
        if(this.formData3.field){
          this.currentNodeValue = this.formData2[this.formData3.field]
        }
        const j03VOList = this.formData1.j03VOList
        const j03VOArrayList = []
        for (const j03VOElement of j03VOList) {
          const j03VO = {}
          j03VO.j0301 = j03VOElement.j0301
          j03VO.j0302 = j03VOElement.j0302
          j03VO.j0303 = j03VOElement.j0303
          const mediaInfoList = []
          if (j03VOElement.j04VOList && j03VOElement.j04VOList.length > 0) {
            for (const item of j03VOElement.j04VOList) {
              const mediaInfo = {}
              for (const itemKey in item) {
                if (itemKey === 'j0403') {
                  if (item[itemKey] === '1') {
                    mediaInfo.b0202Name = '图片'
                  }
                }
                if (this.mediaFieldRuleFrom[itemKey]) {
                  mediaInfo[this.mediaFieldRuleFrom[itemKey]] = item[itemKey]
                }
              }
              mediaInfoList.push(mediaInfo)
            }
          }
          j03VO.mediaInfoList = mediaInfoList
          j03VOArrayList.push(j03VO)
        }
        this.j03VOList = j03VOArrayList
        setTimeout(() => {
          //页面无法更新渲染，先用v-if处理
          this.render = true
        }, 100)
        console.log(this.j03VOList)
      })
    },
    addNode() {
      if (this.form2List.length === 0) {
        this.form2List.push({label: '节点1', field: 'p0', index: 0})
      } else {
        const data = this.form2List[this.form2List.length - 1]
        this.form2List.push({label: '节点' + (data.index + 2), field: 'p' + (data.index + 1), index: data.index + 1})
      }
    },
    addModel() {
      this.j03VOList.push(JSON.parse(JSON.stringify(this.j03VOItem)))
      this.render = false
      setTimeout(() => {
        //页面无法更新渲染，先用v-if处理
        this.render = true
      }, 100)
    },
    //新增
    addMediaInfo(index) {
      this.j03VOIndex = index
      this.modalTitle = "新增";
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.mediaInfoItem.editFlag = false
        this.getListSize(this.j03VOList[this.j03VOIndex].mediaInfoList);
        this.$refs.mediaInfoItem.b0207Num = this.b0207Num;
        this.$refs.mediaInfoItem.init(null);
      });
    },
    //编辑
    editMediaInfo(row, index, j03VOIndex) {
      this.j03VOIndex = j03VOIndex
      this.modalTitle = "编辑";
      this.editIndex = index;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.mediaInfoItem.editFlag = false
        if (row.b0201) {
          row.flag = "edit";
        }
        this.$refs.mediaInfoItem.init(row);
      });
    },
    deleteMediaInfo(index, j03VOIndex) {
      this.j03VOIndex = j03VOIndex
      modal.confirm({
        title: "确认删除吗？",
        onOk: () => {
          if (this.j03VOList[this.j03VOIndex].mediaInfoList[index].b0201) {
            const item = JSON.parse(JSON.stringify(this.j03VOList[this.j03VOIndex].mediaInfoList[index]));
            item.flag = "delete";
            this.mediaInfoListForDel.push(item);
          }
          this.j03VOList[this.j03VOIndex].mediaInfoList.splice(index, 1);
        },
        onCancel: () => {
        },
      });
    },
    //确定
    handleForm() {
      var mediaInfoItem = this.$refs.mediaInfoItem.mediaInfoItem;
      if (this.modalTitle === "新增") {
        mediaInfoItem.flag = "save";
        this.j03VOList[this.j03VOIndex].mediaInfoList.push(mediaInfoItem);
      } else {
        if(mediaInfoItem.flag === 'edit'){
          this.mediaInfoListForEdit.push(mediaInfoItem)
        }
        this.j03VOList[this.j03VOIndex].mediaInfoList.splice(this.editIndex, 1, mediaInfoItem);
      }
      this.$nextTick(() => {
        this.visible = false;
      });
      console.log(this.j03VOList[this.j03VOIndex].mediaInfoList)
    },
    getListSize(list) {
      this.b0207Num = 0;
      list.forEach((item) => {
        if (item.b0207 > this.b0207Num) {
          this.b0207Num = item.b0207;
        }
      });
      if (this.b0207Num < list.length) {
        this.b0207Num = list.length;
      }
      this.b0207Num++;
    },
    checkImg(showId) {
      let url = this.fileShowUrl + showId;
      window.open(url, "_blank");
    },
    getData() {
      const params = {}
      params.j0101 = this.formData1.j0101
      params.orgId = this.formData1.orgId
      params.j0102 = this.formData1.j0102
      params.j0103 = this.formData1.j0103
      params.j0104 = this.formData1.j0104
      params.j0105 = this.formData1.j0105
      params.j0106 = this.formData1.j0106
      params.j0107 = this.formData1.j0107
      params.j0108 = this.formData1.j0108
      params.j0109 = this.formData1.j0109
      params.b0101 = this.b01.key
      params.b0102 = this.b01.label
      params.j0201Field = this.formData3.field==''? null : this.form2List.filter(item => item.field === this.formData3.field)[0].field
      const j02VOList = []
      debugger
      for (let item of this.form2List) {
        if (this.formData2[item.field]) {
          const j02VO = {}
          j02VO.j0201 = item.j0201
          j02VO.j0101 = this.formData1.j0101
          j02VO.j0202 = item.label
          j02VO.j0203 = this.formData2[item.field]
          j02VO.j0204 = item.field
          j02VO.j0205 = item.index
          j02VOList.push(j02VO)
        }
      }
      params.j02VOList = j02VOList

      const j03VOList = []
      console.log(this.j03VOList)
      for (let item of this.j03VOList) {
        if (item.j0301) {
          const j03VO = {}
          j03VO.j0301 = item.j0301
          j03VO.j0302 = item.j0302
          j03VO.j0303 = item.j0303
          j03VOList.push(j03VO)
          if (item.mediaInfoList.length > 0) {
            const j04VOList = []
            for (let e of item.mediaInfoList) {
              const j04VO = {}
                for (const itemKey in e) {
                  if (this.mediaFieldRuleTo[itemKey]) {
                    j04VO[this.mediaFieldRuleTo[itemKey]] = e[itemKey]
                  }
                }
              if (!j04VO.j0401){
                j04VOList.push(j04VO)
              }
            }
            j03VO.j04VOList = j04VOList
          }
        } else {
          if (item.j0302 && item.j0303) {
            const j03VO = {}
            j03VO.j0302 = item.j0302
            j03VO.j0303 = item.j0303
            if (item.mediaInfoList.length > 0) {
              const j04VOList = []
              for (let e of item.mediaInfoList) {
                const j04VO = {}
                for (const itemKey in e) {
                  if (this.mediaFieldRuleTo[itemKey]) {
                    j04VO[this.mediaFieldRuleTo[itemKey]] = e[itemKey]
                  }
                }
                j04VOList.push(j04VO)
              }
              j03VO.j04VOList = j04VOList
            }
            j03VOList.push(j03VO)
          }
        }
      }
      params.j03VOList = j03VOList
      if (this.mediaInfoListForEdit.length > 0) {
        const j04VOListForEdit = []
        for (let e of this.mediaInfoListForEdit) {
          const j04VO = {}
          for (const itemKey in e) {
            if (this.mediaFieldRuleTo[itemKey]) {
              j04VO[this.mediaFieldRuleTo[itemKey]] = e[itemKey]
            }
          }
          j04VOListForEdit.push(j04VO)
        }
        params.j04VOListForEdit = j04VOListForEdit
      }
      if (this.mediaInfoListForDel.length > 0) {
        const j04VOListForDel = []
        for (let e of this.mediaInfoListForDel) {
          const j04VO = {}
          for (const itemKey in e) {
            if (this.mediaFieldRuleTo[itemKey]) {
              j04VO[this.mediaFieldRuleTo[itemKey]] = e[itemKey]
            }
          }
          j04VOListForDel.push(j04VO)
        }
        params.j04VOListForDel = j04VOListForDel
      }

      return params;


    },
    changeNode(value){
      this.currentNodeValue = this.formData2[value]
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  display: inline-block;
  border: 1px solid;
  text-align: center;
  color: #2466d0;
  box-sizing: border-box;
  border-radius: 5px;
  font-weight: bold;
  line-height: 40px;
  font-size: 20px;
  padding: 0px 12px;

  &.divDisPlay {
    display: block;
  }
}

.operate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 10px;


  > div {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }


}

.media-wrap {
  margin-top: 15px;

  li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 15px;

    .item {
      flex: 0 0 auto;
      width: 18%;

      .desc {
        width: 100%;
        height: 21px;
        line-height: 21px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      p {
        width: 100%;
        height: 32px;
        line-height: 30px;
        padding: 0 10px;
        border: 1px solid #3e9fc8;
        border-radius: 4px;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .btn-wrap {
        text-align: center;
      }

      img {
        width: auto;
        height: 90px;
        max-width: 98%;
        vertical-align: middle;
        cursor: pointer;
      }

      &.special {
        width: 5%;
      }
    }
  }
}
</style>